<template>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/qweather-icons@1.3.0/font/qweather-icons.css">
  <div class="full-box">
    <el-row class="head">
      <!--梁宏宇修改添加logo图标-->
      <el-col :span="2">
        <div>
          <img :src="logo_img" alt="TYPS Logo" class="logo-image">
        </div>
      </el-col>
      <el-col :span="10">
        <div class="logo-box">
          <span class="logo-1">特药配送管理系统</span><br>
          <span class="logo-2">www.typs.com</span>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="input-box">
          <!--  logo区域中间按钮 部分       -->
          <el-input
              v-model="input1"
              style="width: 240px; "
              size="large"
              placeholder="订单管理"
              :suffix-icon="Search"
          />
        </div>
        <div class="icon-box">
          <a href="">
            <el-icon style="font-size: 27px ; margin-left: 400px ;color: black">
              <Bell/>
            </el-icon>
          </a>
          <a href="">
            <el-icon style="font-size: 27px ; margin-left: 40px; color: black">
              <Refresh/>
            </el-icon>
          </a>
          <a @click="open">
            <el-icon style="font-size: 27px ; margin-left: 40px;">
              <SwitchButton/>
            </el-icon>
          </a>
        </div>
      </el-col>
      <el-col :span="2"> <!--不需要动-->
        <div class="avatar-box" @click="DriverInfo">
          <el-row>
            <el-avatar class="avatar">{{ data.driver.driverName }}</el-avatar>
          </el-row>
          <el-row style="margin-top: 5px">
            <el-text>个人中心</el-text>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <el-row>
          <el-card class="lives">

            <div>
              <el-row>
                <el-text style="font-size: 20px" tag="b">
                  天气
                </el-text>
                <el-text>---------------------------------</el-text>
              </el-row>
              <el-row>
                <el-text tag="b">{{ data.lives.province }}·{{ data.lives.city }}</el-text>
              </el-row>
              <el-row>
                <el-text>{{ data.lives.reporttime }}发布</el-text>
              </el-row>
              <el-row>
                <el-text style="font-size: 30px">{{ data.lives.temperature }}°</el-text>&nbsp;
                <el-text style="font-size: 20px">{{ data.lives.weather }}</el-text>
              </el-row>
              <i class="qi-2033"></i>
              <el-text>---------------------------------</el-text>
              <el-row>
                <el-text>
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="qi-2033"
                       viewBox="0 0 16 16">
                    <path
                        d="M10.833 13c1.809-.038 2.828.07 4.594.485a.47.47 0 0 0 .562-.377.497.497 0 0 0-.357-.593c-1.84-.432-2.934-.548-4.818-.508-1.174.025-2.072.274-2.922.51l-.012.003c-.852.236-1.657.458-2.713.48-1.809.038-2.828-.07-4.594-.485a.47.47 0 0 0-.562.377.497.497 0 0 0 .357.593c1.84.432 2.934.548 4.818.508 1.174-.025 2.072-.274 2.922-.51l.012-.003c.852-.236 1.657-.458 2.713-.48Zm0 2c1.809-.038 2.828.07 4.594.485a.47.47 0 0 0 .562-.377.497.497 0 0 0-.357-.593c-1.84-.432-2.934-.548-4.818-.508-1.174.025-2.072.274-2.922.51l-.012.003c-.852.236-1.657.458-2.713.48-1.809.038-2.828-.07-4.594-.485a.47.47 0 0 0-.562.377.497.497 0 0 0 .357.593c1.84.432 2.934.547 4.818.508 1.174-.025 2.072-.274 2.922-.51l.012-.003c.852-.236 1.657-.458 2.713-.48ZM5.317 6.667a2.667 2.667 0 0 0 5.333 0c0-.307-.088-.722-.273-1.235a12.677 12.677 0 0 0-.759-1.652 27.974 27.974 0 0 0-1.635-2.633A27.97 27.97 0 0 0 6.348 3.78a12.67 12.67 0 0 0-.758 1.652c-.185.513-.273.928-.273 1.235ZM7.574.569c.138-.196.275-.387.41-.569.133.182.27.373.409.57 1.392 1.976 2.924 4.58 2.924 6.097a3.333 3.333 0 1 1-6.667 0c0-1.516 1.532-4.121 2.924-6.098Z"/>
                  </svg>
                  &nbsp;湿度&nbsp;{{ data.lives.humidity }}%
                </el-text>
                &nbsp;&nbsp; &nbsp;&nbsp;
                <el-text>
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="qi-2051"
                       viewBox="0 0 16 16">
                    <path d="M2 7h6a1 1 0 1 0-.943-1.333.5.5 0 1 1-.943-.334A2 2 0 1 1 8 8H2a.5.5 0 0 1 0-1Z"/>
                    <path
                        d="M11.079 6.375A2.5 2.5 0 0 1 16 7c0 1.397-1.24 2.5-2.5 2.5H.5a.5.5 0 0 1 0-1h13c.74 0 1.5-.688 1.5-1.5a1.5 1.5 0 0 0-2.953-.375.5.5 0 1 1-.968-.25ZM2.5 10.5A.5.5 0 0 1 3 10h8a2 2 0 1 1-1.886 2.667.5.5 0 1 1 .943-.334A1 1 0 1 0 11 11H3a.5.5 0 0 1-.5-.5Zm0-5.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm-.39-3.579c-.02-.176.16-.327.39-.327s.41.151.39.327L2.712 2.97h-.426L2.11 1.42Zm.705 2.173a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Z"/>
                  </svg>
                  &nbsp;{{ data.lives.winddirection }}风&nbsp;{{ data.lives.windpower }}
                </el-text>
              </el-row>
            </div>
          </el-card>
        </el-row>
        <el-row>
          <el-button @click="gotoMyOrder" class="gotoMyOrder">
            我的订单
          </el-button>
        </el-row>
        <el-row>
          <el-button @click="gotoAlreadyOrder" class="gotoMyOrder">
            历史订单
          </el-button>
        </el-row>
      </el-col>
      <el-col :span="20">
        <DriverMain></DriverMain>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {reactive, onMounted} from "vue";
import axios from "axios";
import logo_img from '@/assets/logo2.png';
import {
  Expand, Search, Bell, Refresh, UserFilled, SwitchButton
  , HomeFilled, List, Briefcase, Van, Tools,Grid,
} from '@element-plus/icons-vue'
import moment from "moment/moment";
import DriverMain from "../driver/DriverMain"
import router from "@/router";
import {ElMessage} from "element-plus";

const data = reactive({
  position: "",
  lives: {
    province: "",
    city: "",
    adcode: "",
    weather: "",
    temperature: "",
    winddirection: "",
    windpower: "",
    humidity: "",
    reporttime: "",
    temperature_float: "",
    humidity_float: ""
  },
  adcode: "",
  driver: {
    userId: "",
    driverName: ""
  }
})
//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}


//获取USERId
const getUserId = () => {
  const key = sessionStorage.getItem("userId");
  if (key) {
    console.log("userId" + key);
    data.driver.userId = key;
  } else {
    errorMessage("获取userId失败")
  }
}
//获取driverId
const getDriverId = () => {
  axios({
    url: "http://localhost:8080/driver/selectByUserId",
    method: "get",
    params: {
      userId: data.driver.userId
    }
  }).then((res) => {
    console.log(res.data.data);
    data.driver.driverName = res.data.data.driverName;
  })
}
//获取定位
const getPosition = () => {
  axios({
    url: "https://restapi.amap.com/v3/ip?",
    method: "post",
    params: {
      key: "4decff4600b71b61f564bc330f4d4a08"
    }
  }).then((res) => {
    console.log(res.data.city);
    data.position = res.data.province + res.data.city;
    sessionStorage.setItem("position",data.position);
    data.adcode = res.data.adcode;
  })
}

//获取天气
const getWeather = () => {
  axios({
    url: "https://restapi.amap.com/v3/weather/weatherInfo?city=120000&key=4decff4600b71b61f564bc330f4d4a08",
    method: "get",
    params: {
      city: data.adcode,
      key: "4decff4600b71b61f564bc330f4d4a08"
    }
  }).then((res) => {
    console.log(res.data);
    data.lives = res.data.lives[0];
  })
}
//跳转到我的订单
const gotoMyOrder = () => {
  router.push("/driver/MyOrder");
}

//跳转到历史订单
const gotoAlreadyOrder = () => {
  router.push("/driver/AlreadyOrder");
}

//司机信息
const DriverInfo = () => {
  errorMessage("还没写");
}
onMounted(() => {

  getUserId();
  getDriverId();
  getPosition();
  getWeather();
})

//表头退出按钮(梁宏宇)
import { ElMessageBox} from 'element-plus'
const open = () => {
  ElMessageBox.confirm(
      '确认退出登录?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '成功退出',
        })
        router.push('/login')
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消退出登录',
        })
      })
}



</script>

<style scoped>
.full-box {
  height: 100%;
  width: 100%;
}

.head {
  /*border: 1px solid;*/
  height: 100px;
  width: 100%;
  background-color: #d9ecff;
}

.lives {
  margin-top: 20px;
  width: 240px;
  height: 220px;
  background: #efedcb;
}

.gotoMyOrder {
  width: 241.6px;
  margin-top: 50px;
  height: 70px;
  background: #efedcb;
  font-size: 20px;
  border: 2px #3b833b solid;
}

.avatar {
  width: 60px;
  height: 60px;
margin-top: -5px;
}

.avatar-box {
  margin-top: 12px;
  margin-left: 50px;

}

/*梁宏宇修改*/
.logo-image {
  width: 150px; /* 根据需要调整图片宽度 */
  height: auto; /* 保持图片比例 */
  position: fixed;
  left: 5px;
  top: -18px;
}

.logo-box {
  font-family: "Berlin Sans FB";
  margin-left: 5px;
  margin-top: 10px;
}

.logo-1 {
  font-size: 35px;
  margin-left: -10px;
}

.logo-2 {
  margin-left: 25px;
  font-size: 25px;
}


/*logo区域中间按钮*/
.input-box {
  margin-left: 100px;
  margin-top: 30px;
}
.icon-box{
  margin-top: -32px;
}
</style>